<template>
  <div>
    <div class="header-hr"></div>
    <div class="header">
      <div class="h-center">
        <div class="hc-left">
          <a :href="config.domain" class="hcl-logo">
            <img src="https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221116/95b8b68307394cc082d9cc682fa9fa60.png" alt style="width: 100%;">
          </a>
        </div>
        <div class="hc-right left">
          <div class="hcr-search">
            <input type="text" class="s-input" v-model="search" @input="searchInput" placeholder="请输入案例名称">
            <a :href="searchHref" class="s-button"></a>
          </div>
          <div class="hcr-phone">
            <i class="p-icon"></i>
            <p class="p-num">191-0267-1826</p>
          </div>
        </div>
        <div class="hc-right">
          <div class="hcr-tool">
            <a href="javascript: void(0);" class="hcrt-a" @click="headerPopup('login', true)">登录</a>
            <a href="javascript: void(0);" class="hcrt-a" @click="headerPopup('register', true)">注册</a>
          </div>
          <q class="hcr-notice">当天购买，三天内便上线使用</q>
        </div>
      </div> 
    </div>
    <el-dialog :visible.sync="headerPopupVisible" :close-on-press-escape="false" :close-on-click-modal="false" custom-class="header-popup" width="300px">
      <div class="hp-box">
        <div class="el-icon-close hpb-close" @click="headerPopup('close', false)"></div>
        <div class="hpb-title">{{ hpTitle }}</div>
        <label class="hpb-inline">
          <i class="el-icon-mobile-phone icon"></i>
          <el-input type="text" class="hpbi-input" v-model="phone" clearable maxlength="11" placeholder="请输入手机号码"></el-input>
        </label>
        <label class="hpb-inline">
          <i class="el-icon-lock icon"></i>
          <el-input type="password" class="hpbi-input" v-model="password" show-password placeholder="请输入登录密码"></el-input>
        </label>
        <label class="hpb-inline" v-if="hpType=='register'">
          <i class="el-icon-lock icon"></i>
          <el-input type="password" class="hpbi-input" v-model="repassword" show-password placeholder="请确认登录密码"></el-input>
        </label>
        <div class="hpb-agreement">
          <el-checkbox v-model="agreement">我已阅读并同意</el-checkbox><a href="" class="hpba-a">服务协议</a>、<a href="" class="hpba-a">信息保护政策</a>
        </div>
        <button class="hpb-button" :disabled="hpDisabled" @click="hpClick">{{ hpButtonText }}</button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: ['config'],
  data() {
    return {
      search: '',
      searchHref: `${this.config.domain}/khal/`,
      headerPopupVisible: false,
      hpType: '',
      hpTitle: '纺扬科技',
      phone: '',
      password: '',
      repassword: '',
      agreement: false,
      hpButtonText: '提交',
      hpDisabled: false
    }
  },
  methods: {
    // 搜索案例名称
    searchInput(e) {
      this.searchHref =  `${this.config.domain}/khal/`
      if (this.search) {
        this.searchHref =  `${this.config.domain}/khal/?keyword=${this.search}`
      }
    },
    // 搜索产品名称
    searchShopInput() {
      console.log(this.searchShop)
    },
    // 弹窗
    headerPopup(type, state) {
      switch(type) {
        case 'login':
          this.hpTitle = '账号密码-登录'
          this.hpButtonText = '立即登录'
          break;
        case 'register':
          this.hpTitle = '账号密码-注册'
          this.hpButtonText = '立即注册'
          break;
      }
      this.hpType = type
      this.headerPopupVisible = state
    },
    // 登录或注册
    hpClick() {
      // 登录
      if (this.hpType == 'login') {
        console.log(this.agreement)
      }
      // 注册
      if (this.hpType == 'register') {

      }
    }
  }
}
</script>